<script setup lang="ts">
import MapContainer from './components/MapContainer/MapContainer.vue'
import { ref } from 'vue'
import { MapContainerType } from './components/MapContainer/components/Constant/MapContainerType.ts'

const mapContainerType = ref(MapContainerType.OpenlayersMap)
</script>

<template>
    <MapContainer :mapContainerType="mapContainerType"></MapContainer>
    <div class="toolbar">
        <el-select v-model="mapContainerType" placeholder="请选择地图容器类型">
            <el-option label="Leaflet" :value="MapContainerType.LeafletMap" />
            <el-option label="Openlayers" :value="MapContainerType.OpenlayersMap" />
            <el-option label="MapBox" :value="MapContainerType.MapboxMap" />
            <el-option label="Cesium" :value="MapContainerType.CesiumViewer" />
        </el-select>
    </div>
</template>

<style scoped>
.toolbar {
    z-index: 9999;
    position: absolute;
    left: 20px;
    bottom: 20px;
}
</style>
